<template>
  <div class="login">
    <img class="logo" src="../assets/logo.png" alt="" />

    <h2 class="welcome">欢迎登录</h2>
    <h2 class="title">只有峨眉山分销系统</h2>
    <p class="tips">手机验证登录，无需注册</p>

    <!-- form 输入框 -->
    <van-form @submit="onSubmit">
      <van-field v-model="form.username" name="手机号码" label="手机号码" placeholder="请输入您的手机号码" />
      <van-field class="verif" v-model="form.password" type="password" name="验证码" label="验 证 码" placeholder="请输入验证码">
        <template #button>
          <van-button class="send" size="small" round style="color: #0094a6; background: #c4e2e5" type="primary">发送验证码
          </van-button>
        </template>
      </van-field>
      <div style="margin: 16px 0">
        <van-button class="loginBtn" round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>

    <!-- 协议政策 -->
    <van-checkbox v-model="isShowFile">
      已分享并同意 <span  @click.stop="showDocument">分销政策协议</span> 和 <span 
        @click.stop="showDocument">服务条款</span>
    </van-checkbox>

  </div>
</template>

<script>
import { Dialog } from "vant";
// 引入登录的方法
// import { login } from "@/apis/model/user/index"
export default {
  name: "login",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      isShowFile: false,
    };
  },
  methods: {
    onSubmit(values) {
      //   login(values).then(res=>{
      //        //res请求成功的参数
      //     console.log("请求成功")
      //   }).catch(err=>{
      //     console.log(err)
      //   })
      console.log("submit", values);
      
      // 把分销商的等级传递进去
      // this.$store.commit('setRole', '几级分销商')

      this.$router.push("/home");
    },
    showDocument() {
      Dialog.alert({
        title: "标题",
        message: `
          政策协议
          政策协议
          政策协议
          政策协议
          政策协议 `,
      }).then(() => {
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  padding: 66px 86px;
  box-sizing: border-box;
  background-color: #f5f5f5;

  .logo {
    width: 260px;
    height: 48px;
  }

  .welcome {
    width: 217px;
    height: 53px;
    font-size: 54px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #444444;
    line-height: 72px;
    margin: 42px 0 22px;
  }

  .title {
    width: 530px;
    height: 56px;
    font-size: 58px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #444444;
    line-height: 72px;
  }

  .tips {
    color: #a0a0a0;
    margin-top: 40px;
    margin-bottom: 284px;
  }
}

::v-deep .loginBtn {
  background-color: #eba206 !important;
  border: 0;
}

.van-field {
  padding: 16px 0;
  margin-bottom: 45px;
}

.van-cell {
  background-color: transparent;
}

.van-cell::after {
  border-color: #cecece;
  left: 0;
}

::v-deep .van-field__label {
  color: black;
}

.van-field__label:last-child {
  letter-spacing: 2px;
}

.verif ::v-deep .van-field__label>span {
  letter-spacing: 2px;
}

.send {
  border: 0;
  width: 172px;
  height: 52px;
  border-radius: 26px;
}

.van-checkbox {
  width: 100%;
  bottom: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #606060;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;

  span {
    color: black;
    text-decoration: underline;
    font-size: 20px;
  }
}


::v-deep .van-dialog {
  height: 80vh;
  overflow-y: auto;
}

</style>